<template>
    <el-scrollbar>

        <el-card class="mb20">
            <el-row>
                <el-col :span="4">
                    <el-statistic title="待发货" :value="data.waitDo.waitOrder" />
                </el-col>

                <el-col :span="4">
                    <el-statistic title="退款/售后" :value="data.waitDo.refundOrder" />
                </el-col>

                <el-col :span="4">
                    <el-statistic title="库存预警" :value="data.waitDo.stockDanger" />
                </el-col>
            </el-row>

        </el-card>

        <el-space direction="vertical"
                  class="index_container"
                  fill
                  :size="20">
            <el-row :gutter="20">
                <el-col :span="6" v-for="vo in data.sta">
                    <el-card class="sta_card">
                        <div class="sta_total">
                            <div class="title">{{vo.title}}</div>
                            <div class="sum">
                                <div class="sum_icon" :style="{background:vo.color}">
                                    <i :class="vo.icon"></i>
                                </div>
                                <div class="sum_text">{{vo.total}}</div>
                            </div>
                        </div>
                        <div class="footer">
                            <div class="inc">今日新增 {{vo.today}}</div>
                            <div class="today_per">日同比 {{vo.per}}%</div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>


            <el-row>
                <el-col>
                    <!--  销售额-->
                    <el-card>
                        <amount-charts/>
                    </el-card>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span=8>
                    <el-card>
                        <user-amount-charts/>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card>
                        <user-reward-charts/>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card>
                        <goods-sales-charts />
                    </el-card>
                </el-col>
            </el-row>

<!--            <el-row :gutter="20">-->
<!--                <el-col :span="18">-->
<!--                    <el-card>-->
<!--                        &lt;!&ndash;  销量&ndash;&gt;-->
<!--                        <sales-charts :height="360"/>-->
<!--                    </el-card>-->
<!--                </el-col>-->
<!--                <el-col :span="6">-->
<!--                    <el-card header="商品销量排行榜">-->
<!--                        &lt;!&ndash;  销量排行榜&ndash;&gt;-->
<!--                        <sales-sort :height="300"/>-->
<!--                    </el-card>-->
<!--                </el-col>-->
<!--            </el-row>-->

        </el-space>
    </el-scrollbar>

</template>

<script setup lang="ts">

import {simpleGet} from "@/utils/request";
import {computed, onMounted, reactive, ref} from "vue";
import AmountCharts from "@/views/index/AmountCharts.vue";
import UserAmountCharts from "@/views/index/UserAmountCharts.vue";
import UserRewardCharts from "@/views/index/UserRewardCharts.vue";
import GoodsSalesCharts from "@/views/index/GoodsSalesCharts.vue";

const data: Record<string, any> = reactive({
    sta: [],
    waitDo:{},
})

// 待办事项
const getWaitDo = () => {
    simpleGet('/index/waitDo').then(res => {
        data.waitDo = res.waitDo
    })
}

const getSta = async () => {
    const res = await simpleGet("/index/statistic")
    data.sta = [
        {title:'会员', total:res.totalUser, today:res.todayUser, per:res.userPer, color:'#00BFFF', icon: 'fas fa-user-plus'},
        {title:'订单', total:res.totalOrder, today:res.todayOrder, per:res.orderPer, color: '#F6CC4E', icon: 'far fa-file-alt'},
        {title:'销售额', total:res.totalAmount, today:res.todayAmount, per:res.amountPer, color: '#d81e06', icon: 'fas fa-yen-sign'},
        {title:'销量', total:res.totalSales, today:res.todaySales, per:res.salesPer,  color: '#8817d3', icon: 'fas fa-dolly'},
    ]
}


getWaitDo()
getSta()







</script>

<style scoped lang="scss">
.index_container{
    width: 100%;
}
.sta_card{
    .sta_total {

        margin-bottom: 10px;

        .title{
            color: #666;
            margin-bottom: 20px;
        }
        .sum{
            display: flex;
            align-items: center;
        }
        .sum_icon{
            display: flex;
            justify-items: center;
            justify-content: center;
            flex-shrink: 0;
            background-color: #00BFFF;
            color: #fff;
            border-radius: 8px;
            padding: .5em;
            margin-right: 15px;
        }
        .sum_text{
            font-size: 28px;
            color: #333;
            font-weight: bold;
        }

    }

    .footer{
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #999;
        .inc{

        }
        .today_per{
            color: #999
        }
    }

}

</style>
